<template>
  <div>
    <div>
      <div class="ass_1">
        <div class="headline_1"><span>激活分配</span></div>
        <ActivationTable
          v-for="assignment in activeAssignment"
          :key="assignment.id"
          :assignment="assignment"
          @click="toAssignmentsDetails(assignment.token)"
        ></ActivationTable>
        <!-- <div v-else class="nodata">暂无激活分配</div> -->
        <!-- <div
          class="Overall"
          :style="{ 'border-left': formatBorder(activeAssignment.status) }"
          @click="toAssignmentsDetails(activeAssignment.token)"
          v-if="activeAssignment != ''"
        >
          <div
            class="state"
            :style="{
              'background-color': formatStaeColor(activeAssignment.status),
            }"
          >
            <div class="stateMsg">
              <svg-icon
                class="empty"
                :icon-class="formatIclass(activeAssignment.status)"
              />
              <div
                class="stateText"
                :style="{ color: formatTextcolor(activeAssignment.status) }"
              >
                {{ formatText(activeAssignment.status) }}
              </div>
              <div class="release">
                <svg-icon
                  class="arrow-watch"
                  :icon-class="formatArrow(activeAssignment.status)"
                ></svg-icon
                >发布时间：{{ formatDateT(activeAssignment.releasedDate) }}
              </div>
              <div class="allocation">
                <svg-icon
                  class="arrow-watch"
                  :icon-class="formatWatches(activeAssignment.status)"
                ></svg-icon
                >分配时间：{{ formatDateT(activeAssignment.activeDate) }}
              </div>
            </div>
          </div>

          <div class="Information">
            <div class="layout" v-if="activeAssignment.device">
              <el-image
                class="deviceImg"
                :src="activeAssignment.device.deviceType.imageUrl"
              />
              <div class="deviceName" :title="activeAssignment.device.name">
                设备：{{ activeAssignment.device.name }}
              </div>
              <div
                class="deviceDescribe"
                :title="activeAssignment.device.comments"
              >
                {{ activeAssignment.device.comments }}
              </div>
            </div>
            <div class="layout" v-else>
              <svg-icon class="emptypicture" icon-class="emptypicture" />
              <div class="notYet">设备：暂无</div>
            </div>

            <div class="layout" v-if="activeAssignment.customer">
              <el-image
                class="deviceImg"
                :src="activeAssignment.customer.imageUrl"
              />
              <div class="deviceName" :title="activeAssignment.customer.name">
                用户：{{ activeAssignment.customer.name }}
              </div>
              <div
                class="deviceDescribe"
                :title="activeAssignment.customer.description"
              >
                {{ activeAssignment.customer.description }}
              </div>
            </div>
            <div class="layout" v-else>
              <svg-icon class="emptypicture" icon-class="emptypicture" />
              <div class="notYet">用户：暂无</div>
            </div>

            <div class="layout" v-if="activeAssignment.area">
              <el-image class="deviceImg" :src="activeAssignment.area.imageUrl" />
              <div class="deviceName" :title="activeAssignment.area.name">
                站点：{{ activeAssignment.area.name }}
              </div>
              <div
                class="deviceDescribe"
                :title="activeAssignment.area.description"
              >
                {{ activeAssignment.area.description }}
              </div>
            </div>
            <div class="layout" v-else>
              <svg-icon class="emptypicture" icon-class="emptypicture" />
              <div class="notYet">站点：暂无</div>
            </div>

            <div class="layout" v-if="activeAssignment.asset">
              <el-image class="deviceImg" :src="activeAssignment.asset.imageUrl" />
              <div class="deviceName" :title="activeAssignment.asset.name">
                网关：{{ activeAssignment.asset.name }}
              </div>
              <div class="deviceDescribe" :title="activeAssignment.asset.token">
                {{ activeAssignment.asset.token }}
              </div>
            </div>
            <div class="layout" v-else>
              <svg-icon class="emptypicture" icon-class="emptypicture" />
              <div class="notYet">网关：暂无</div>
            </div>
          </div>
        </div> -->
      </div>
      <div class="ass_2">
        <div class="headline_1"><span>历史分配</span></div>
        <ActivationTable
          v-for="assignment in assignmentsDatas"
          :key="assignment.id"
          :assignment="assignment"
          @click="toAssignmentsDetails(assignment.token)"
        ></ActivationTable>
        <!-- <div
          class="Overall"
          :style="{ 'border-left': formatBorder(assignment.status) }"
          v-for="assignment in assignmentsDatas"
          @click="toAssignmentsDetails(assignment.token)"
          :key="assignment.id"
        >
          <div
            class="state"
            :style="{ 'background-color': formatStaeColor(assignment.status) }"
          >
            <div class="stateMsg">
              <svg-icon
                class="empty"
                :icon-class="formatIclass(assignment.status)"
              />
              <div
                class="stateText"
                :style="{ color: formatTextcolor(assignment.status) }"
              >
                {{ formatText(assignment.status) }}
              </div>
              <div class="release">
                <svg-icon
                  class="arrow-watch"
                  :icon-class="formatArrow(assignment.status)"
                ></svg-icon
                >发布时间：{{ formatDateT(assignment.releasedDate) }}
              </div>
              <div class="allocation">
                <svg-icon
                  class="arrow-watch"
                  :icon-class="formatWatches(assignment.status)"
                ></svg-icon
                >分配时间：{{ formatDateT(assignment.activeDate) }}
              </div>
            </div>
          </div>

          <div class="Information">
            <div class="layout" v-if="assignment.device">
              <el-image
                class="deviceImg"
                :src="assignment.device.deviceType.imageUrl"
              />
              <div class="deviceName" :title="assignment.device.name">
                设备：{{ assignment.device.name }}
              </div>
              <div class="deviceDescribe" :title="assignment.device.comments">
                {{ assignment.device.comments }}
              </div>
            </div>
            <div class="layout" v-else>
              <svg-icon class="emptypicture" icon-class="emptypicture" />
              <div class="notYet">设备：暂无</div>
            </div>

            <div class="layout" v-if="assignment.customer">
              <el-image class="deviceImg" :src="assignment.customer.imageUrl" />
              <div class="deviceName" :title="assignment.customer.name">
                用户：{{ assignment.customer.name }}
              </div>
              <div
                class="deviceDescribe"
                :title="assignment.customer.description"
              >
                {{ assignment.customer.description }}
              </div>
            </div>
            <div class="layout" v-else>
              <svg-icon class="emptypicture" icon-class="emptypicture" />
              <div class="notYet">用户：暂无</div>
            </div>

            <div class="layout" v-if="assignment.area">
              <el-image class="deviceImg" :src="assignment.area.imageUrl" />
              <div class="deviceName" :title="assignment.area.name">
                站点：{{ assignment.area.name }}
              </div>
              <div class="deviceDescribe" :title="assignment.area.description">
                {{ assignment.area.description }}
              </div>
            </div>
            <div class="layout" v-else>
              <svg-icon class="emptypicture" icon-class="emptypicture" />
              <div class="notYet">站点：暂无</div>
            </div>

            <div class="layout" v-if="assignment.asset">
              <el-image class="deviceImg" :src="assignment.asset.imageUrl" />
              <div class="deviceName" :title="assignment.asset.name">
                网关：{{ assignment.asset.name }}
              </div>
              <div class="deviceDescribe" :title="assignment.asset.token">
                {{ assignment.asset.token }}
              </div>
            </div>
            <div class="layout" v-else>
              <svg-icon class="emptypicture" icon-class="emptypicture" />
              <div class="notYet">网关：暂无</div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  formatBorder,
  formatIclass,
  formatTextcolor,
  formatText,
  formatArrow,
  formatWatches,
} from "@/views/common/js/device/assignments.js";
import { formatTime } from "@/views/common/js/utils.js";
import ActivationTable from "@/components/ActivationTable";
import { getAssignments2, getAssignmentsActive } from "@/api/assignments";
import { devicesAssignments } from "@/api/device";
export default {
  components: {
    ActivationTable,
  },
  props: {
    deviceToken: {
      type: String,
    },
    pageNum: {
      type: Number,
    },
    pageSize: {
      type: Number,
    },
  },
  data() {
    return {
      condition: true,
      noEquipment: false,
      assignmentsDatas: [],
      activeAssignment: "",
    };
  },
  mounted() {},
  created() {},
  methods: {
    formatDateT(date) {
      return formatTime(date);
    },
    formatBorder(status) {
      return formatBorder(status);
    },
    formatIclass(status) {
      return formatIclass(status);
    },
    formatTextcolor(status) {
      return formatTextcolor(status);
    },
    formatText(status) {
      return formatText(status);
    },
    formatArrow(status) {
      return formatArrow(status);
    },
    formatWatches(status) {
      return formatWatches(status);
    },
    formatStaeColor(status) {
      if (status === "Active") {
        return "#F1F5EF";
      } else if (status === "Missing") {
        return "#FBF2F2";
      } else {
        return "#F2F2F2";
      }
    },
    init() {
      this.getAssignmentHistory();
      this.getActiveAssignment();
    },
    //获取分配历史
    getAssignmentHistory() {
      this.loading = true;
      var that = this;
      var params = {
        includeDevice: true,
        includeCustomer: false,
        includeArea: true,
        includeAsset: true,
        page: that.pageNum,
        pageSize: that.pageSize,
      };

      getAssignments2(params, this.deviceToken).then((res) => {
        this.assignmentsDatas = res.data.results.map((item) => {
          return {
            ...item.ideviceAssignment,
            ...item.user,
          };
        });

        this.$emit("setPageToatl", res.data.numResults);
        this.loading = false;
      });
    },
    //激活分配
    getActiveAssignment() {
      var that = this;
      var params = {
        includeDevice: true,
        includeCustomer: false,
        includeArea: true,
        includeAsset: true,
        deviceToken: that.deviceToken,
      };
      getAssignmentsActive(params, this.deviceToken).then((res) => {
        var results = res.data;
        const activeAssignment = results.filter((item) => {
          return item.status == "Active";
        });

        if (activeAssignment.length) {
          that.activeAssignment = activeAssignment;
        }
      });
    },
    //分配详情
    toAssignmentsDetails(token) {
      this.$router.push({
        path: "/device/deviceAssignmentsPage/deviceAssignmentsDetails",
        query: { assignmentsToken: token },
      });
    },
  },
};
</script>

<style lang='scss' scoped>
@import "~@/assets/style/deviceCss/deviceAssignment.css";
@import "~@/styles/mixin.scss";
/* .nodata {
  text-align: center;
  color: #999;
} */
.headline_1 {
  /* background-color: #e4f0fa; */
  height: 43px;
  position: relative;
  border-left: 3px solid #bedaf2;
  margin-bottom: 8px;
  margin-top: 8px;
}
.headline_1 span {
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  color: #333333;
  margin: 10px 0 0 24px;
}
</style>>
